<!-- 文字溢出触发el-tooltip -->
<template>
	<el-tooltip :effect="props.effect" :content="props.content" :placement="props.placement" :disabled="isShowTooltip">
		<div class="text-ellipsis" :class="props.className" @mouseover="onMouseOver">
			<span ref="ellipsisRef">{{ props.content }}</span>
		</div>
	</el-tooltip>
</template>

<script setup lang="ts" name="overflowTip">
const props = defineProps({
	placement: {
		type: String,
		default: 'top',
	},
	content: {
		type: String,
		default: '',
	},
	effect: {
		type: String,
		default: 'dark',
	},
	className: { type: String, default: '' },
});
const ellipsisRef = ref();
const isShowTooltip = ref(false);
const onMouseOver = () => {
	let parentWidth = ellipsisRef.value.parentNode.offsetWidth; // 获取元素父级可视宽度
	let contentWidth = ellipsisRef.value.offsetWidth; // 获取元素可视宽度
	isShowTooltip.value = contentWidth <= parentWidth;
};
</script>

<style lang="scss" scoped>
.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
